<template>
  <div class="shiptwo">
    <div>
      <van-nav-bar
        title="收货地址"
        left-text=""
        left-arrow
        @click-left="onClickLeft"
      >
        <template #right>
          <van-icon name="search" size="18" />
        </template>
      </van-nav-bar>
    </div>
    <div class="address">
      <div class="address-list">
        <div class="address-manager" v-for="item in List" :key="item.id">
          <ul>
            <li class="address-top">
              <span class="address-name">{{ item.name }}</span>
              <span>{{ item.phone }}</span>
              <a
                href="javascript:;"
                class="address-del"
                @click="detele(item.id)"
                >删除</a
              >
            </li>
            <li class="address-bottom">
              <p>{{ item.address_region }}</p>
              <p>{{ item.address_info }}</p>
              <a href="javascript#:;" class="address-jt"></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <van-button type="primary" block to="/shipping">新建地址</van-button>
  </div>
</template>

<script>
import { getaddress, removeaddress } from '../../../api/me'
export default {
  data() {
    return {
      List: []
    }
  },
  created() {
    this.getson()
  },
  methods: {
    async getson() {
      const res = await getaddress()
      this.List = res.data.message
    },
    onClickLeft() {
      this.$router.push({ path: '/me' })
    },
    async detele(id) {
      const res = await removeaddress(id)
      console.log(res.data)
      this.getson()
    }
  }
}
</script>

<style  lang="less">
.shiptwo {
  position: relative;
  padding-bottom: 44px;
  .van-button {
    position: fixed;
    bottom: 50px;
  }
}
.address {
  .address-list {
    .address-manager {
      border: 1px solid #eee;
      overflow: hidden;
      margin: 11px;
      border-radius: 0.96px;
      background: #fff;
      text-align: left;
      height: 116px;
      // width: 100%;
      ul {
        position: relative;
        padding: 11px;
      }
      .address-top {
        border-bottom: 1px solid #eee;
        display: block;
        font-size: 16.5px;
        overflow: hidden;
        background: #fff;
        padding: 11px 16px;
        height: 21px;
        .address-name {
          margin-right: 33px;
          color: #f60;
        }
        .address-del {
          float: right;
          color: #999;
        }
      }
      .address-bottom {
        position: relative;
        padding-right: 15px;
        font-size: 15px;
        padding: 11px 15px 0;
        height: 37px;
        p {
          line-height: 18px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 15px;
          color: #3c3c3c;
          margin: 0px;
        }
        .address-jt {
          position: absolute;
          width: 7px;
          height: 7px;
          right: 0.14rem;
          top: 50%;
          margin-top: -3.8px;
          border-right: 1px solid #999;
          border-bottom: 1px solid #999;
          -webkit-transform: rotate(-45deg);
        }
      }
    }
  }
}
</style>
